<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta charset="GB18030">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/main.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/ztree/zTreeStyle.css">
</head>
<body style="margin-top: -50px">
	<div class="panel panel-default" style="margin-top: 0px; width: 700px;">
		<div class="panel-heading">
			<h3 class="panel-title">
				<i class="glyphicon glyphicon-th"></i> 角色管理
			</h3>
		</div>
		<div class="panel-body">
			<form class="form-inline" role="form" style="float: left;">

				<div class="form-group has-feedback">
					<div class="input-group">
						<div class="input-group-addon">角色名称</div>
						<input class="form-control has-success" type="text"
							placeholder="支持模糊查询" id="searchCondition" /> <input
							id="condition" type="text" hidden value="" /> <input id="pn"
							type="text" hidden value="1" />
					</div>
				</div>
				<button type="button" class="btn btn-warning" id="search_btn">
					<i class="glyphicon glyphicon-search"></i> 查询
				</button>
			</form>
			<button class="btn btn-info" style="float: right; margin-left: 10px;"
				id="add" data-toggle="modal" data-target="#addRole">
				<i class=" glyphicon glyphicon-plus"></i> 新增
			</button>
			<br>
			<hr style="clear: both;">
			<div class="table-responsive">
				<table class="table  table-bordered">
					<thead>
						<tr>
							<th width="30">#</th>
							<th>角色名称</th>
							<th width="125">操作</th>
						</tr>
					</thead>
					<!-- 信息展示 -->
					<tbody id="tb1">
					</tbody>
				</table>
			</div>
			<!-- 分页信息 -->
			<div class="row" id="page_div"></div>
		</div>
		<!-- 新增模态框 -->
		<div class="modal fade" id="addRole" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">新增角色</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" id="form1">
							<div class="form-group">
								<label for="inputroleName" class="col-sm-2 control-label">角色名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputroleName"
										name="roleName" placeholder="请输入角色名称" required="required">
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="sub1">保存</button>
					</div>

				</div>
			</div>
		</div>
		<!-- 新增模态框结束 -->
		<!-- 修改模态框 -->
		<div class="modal fade" id="updateRole" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">修改角色</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" id="form2">
							<input type="text" id="inputroleId" name="roleId" hidden>
							<div class="form-group">
								<label for="inputroleName2" class="col-sm-2 control-label">角色名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputroleName2"
										name="roleName" placeholder="请输入角色名称" required="required">
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="sub2">保存</button>
					</div>

				</div>
			</div>
		</div>
		<!-- 修改模态框结束 -->
		<!-- 角色授权模态框 -->
		<div class="modal fade" id="assignRole" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">角色授权</h4>
					</div>
					<div class="modal-body">
						<ul id="treeDemo" class="ztree"></ul>
						<input type="text" id="rid" hidden/>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="sub3">保存</button>
					</div>

				</div>
			</div>
		</div>
		<!-- 角色授权模态框结束 -->
		<script
			src="${pageContext.request.contextPath}/static/jquery/jquery-2.1.1.min.js"></script>
		<script
			src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
		<script
			src="${pageContext.request.contextPath}/static/script/docs.min.js"></script>
		<script src="${pageContext.request.contextPath}/static/ztree/jquery.ztree.all-3.5.min.js"></script>	
		<script type="text/javascript">
			$(function() {
				loadRoles();
				//查询
				$("#search_btn").click(function() {
					var searchcondition = $("#searchCondition").val();
					$("#condition").val(searchcondition);
					$("#pn").val(1);
					loadRoles();
				})
				//修改
				$("#sub2").click(function(){
					var roleName=$("#inputroleName2").val();
					$.post("${pageContext.request.contextPath}/role/updateRole",$("#form2").serialize(),function(){
						$('#updateRole').modal('hide');
						loadRoles();
					});
					
				})
				//新增
				$("#sub1").click(function(){
					var roleName=$("#inputroleName").val();
					$.post("${pageContext.request.contextPath}/role/addRole",{"roleName":roleName},function(){
						$('#addRole').modal('hide');
						loadRoles();
					});
					
				})
				//新增模态框关闭
				$('#addRole').on('hidden.bs.modal', function() {
					$("#inputroleName").val("");
				})

			})
		</script>
		<script type="text/javascript">
			function loadRoles() {
				var pn = $("#pn").val();
				var condition = $("#condition").val();
				$
						.ajax({
							url : "${pageContext.request.contextPath}/role/getAll",
							type : "post",
							data : {"pn" : pn,"condition" : condition},
							dataType : "json",
							success : function(data) {
								var list = data.list;
								var trStr = "";
								for (var i = 0; i < list.length; i++) {
									trStr = trStr + "<tr>";
									trStr = trStr + "<td>" + (i + 1) + "</td>";
									trStr = trStr + "<td>" + list[i].roleName
											+ "</td>";
									trStr = trStr + "<td>";
									trStr = trStr
											+ "<button type='button' class='btn btn-primary  btn-xs' name='updateRole' rolename='"+list[i].roleName+"' roleid='"+list[i].roleId+"'><i class=' glyphicon glyphicon-pencil'></i></button>";
									trStr = trStr + "&nbsp" + "&nbsp" + "&nbsp"
											+ "&nbsp" + "&nbsp" + "&nbsp";
									trStr = trStr
											+ "<button type='button' class='btn btn-success   btn-xs' name='assignRole' roleid='"+list[i].roleId+"'><i class=' glyphicon glyphicon-user'></i></button>";
									trStr = trStr + "&nbsp";
									trStr = trStr + "</td>";
								}
								$("#tb1").html(trStr);
								var divStr = "";
								divStr = divStr + "<div align='center'>";
								divStr = divStr + "<ul class='pagination'>";
								divStr = divStr
										+ "<li><a href='javascript:changePage(1)'>首页</a></li>";
								divStr = divStr + "<li>";
								if (data.hasPreviousPage) {
									divStr = divStr
											+ "<a href='javascript:changePage(-1)' aria-label='Previous'> <span aria-hidden='true'>«</span></a>";
								}
								divStr = divStr + "</li>";
								var navigatepageNums = data.navigatepageNums;
								for (var i = 0; i < navigatepageNums.length; i++) {
									if (navigatepageNums[i] == data.pageNum) {
										divStr = divStr
												+ "<li class='active'><a href='#'>"
												+ navigatepageNums[i]
												+ "</a></li>";
									}
									if (navigatepageNums[i] != data.pageNum) {
										divStr = divStr
												+ "<li><a href='javascript:changePage("
												+ navigatepageNums[i] + ")'>"
												+ navigatepageNums[i]
												+ "</a></li>";
									}
								}
								divStr = divStr + "<li>";
								if (data.hasNextPage) {
									divStr = divStr
											+ "<a href='javascript:changePage(-2)' aria-label='Next'> <span aria-hidden='true'>»</span> </a>";
								}
								divStr = divStr + "</li>";

								divStr = divStr
										+ "<li><a href='javascript:changePage("
										+ data.pages + ")'>尾页</a></li>";
								divStr = divStr + "</ul>";
								divStr = divStr + "</div>";
								divStr = divStr + "<div align='center'>当前第 "
										+ data.pageNum + " 页.总共 " + data.pages
										+ " 页.一共 " + data.total + " 条记录</div>";
								$("#page_div").html(divStr);

								//绑定函数
								updateRole();
								loadTree();
							}
						});
			}

			//翻页
			function changePage(page) {
				var pn = $("#pn").val();
				if (page == -1) {
					$("#pn").val(pn - 1);
				} else if (page == -2) {
					var pn1 = parseInt(pn);
					$("#pn").val(pn1 + 1);
				} else {
					$("#pn").val(page);
				}

				loadRoles();
			}
			//修改角色信息
			function updateRole() {
				$("[name=updateRole]").click(function() {
					var roleId = $(this).attr("roleid");
					var roleName = $(this).attr("rolename");
					$("#inputroleId").val(roleId);
					$("#inputroleName2").val(roleName);
					$('#updateRole').modal('show');
				})
			}

			function loadTree() {
				$("[name=assignRole]")
						.click(
								function() {
									var roleId = $(this).attr("roleid");
									$("#rid").val(roleId);
									var setting = {
										check : {
											enable : true
										},
										view : {
											selectedMulti : false,
											addDiyDom : function(treeId,
													treeNode) {
												//获取每个节点的小图标
												var icoObj = $("#"
														+ treeNode.tId + "_ico"); // tId = permissionTree_1, $("#permissionTree_1_ico")
												//如果存在替换小图标，就替换小图标
												if (treeNode.icon) {
													icoObj
															.removeClass(
																	"button ico_docu ico_open")
															.addClass(
																	treeNode.icon)
															.css("background",
																	"");
												}
											}
										}
									};
									$
											.getJSON(
													"${pageContext.request.contextPath}/pm/getPersTree?rid="
															+ roleId,
													function(data) {

														$.fn.zTree.init(
																$("#treeDemo"),
																setting,
																data.tree);
														//得到树对象，参数直接写id，不写#
														var treeObj = $.fn.zTree
																.getZTreeObj("treeDemo");
														//获得所有的节点

														for (var i = 0; i < data.pers.length; i++) {
															//根据树节点的id得到树节点
															var node = treeObj
																	.getNodeByParam(
																			"id",
																			data.pers[i].pmId,
																			null);
															//将treeObj上的node设置为true,被选中
															treeObj.checkNode(
																	node, true);
														}
														$('#assignRole').modal(
																'show');
													});

								});
				$("#sub3")
						.click(
								function() {
									//得到树对象
									var treeObj = $.fn.zTree
											.getZTreeObj("treeDemo");
									var array = [];
									//得到所有选中的节点
									var nodes = treeObj.getCheckedNodes(true);
									for (var i = 0; i < nodes.length; i++) {
										//将选中的节点的id放到数组中
										array.push(nodes[i].id);
									}
									//向服务器发送ajax请求
									$
											.post(
													"${pageContext.request.contextPath}/role/updatePersByRole",
													{
														"rid" : $("#rid").val(),
														"pids" : array
																.join(",")
													}, function(data) {
														$('#assignRole').modal(
																'hide');
													})
								})

			}
		</script>
</body>
</html>